<template>
  <div class="home">
    <div class="headers">
      <div class="headers-main">
        <Header></Header>

      </div>
    </div>
    <section ref='wrapper'>
      <div>
        <div v-for="item in newData" :key="item.type">
          <Swiper v-if="item.type == 'swiperList'" :swiperList="item.data"></Swiper>

          <Grid v-if="item.type == 'gridList'" :gridList="item.data" style="margin-top:20px"></Grid>

          <Icons v-if="item.type == 'iconsList'" style="margin-top:10px" @subscribe="subscribe"></Icons>

          <Dswiper v-if="item.type == 'DswiperList'" :DswiperList="item.data" ></Dswiper>

          <Recommend v-if="item.type == 'recommendList'" :recommendList="item.data"></Recommend>

          <Ad v-if="item.type == 'adList'" :adList="item.data"></Ad>

          <Like v-if="item.type == 'likeList'" :likeList="item.data"></Like>


        </div>
        <div class="kong"></div>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue';
import Header from '@/components/home/Header.vue';
import Swiper from '@/components/home/Swiper.vue';
import Icons from '@/components/home/Icons.vue';
import Recommend from '@/components/home/Recommend.vue';
import Ad from '@/components/home/Ad.vue'
import Like from '@/components/home/Like.vue';
// 引入插件
import BetterScroll from 'better-scroll'
import http from '@/common/api/request.js'
import Grid from '@/components/home/Grid.vue'
import { Dialog,Notify } from 'vant';
import Dswiper from '../components/home/Dswiper.vue';
export default {
  name: "Home",
  data() {
    return {
      selectedId: 0,
      items: [],
      newData: [],
      oBetterScroll: '',
      tBetterScroll: '',
      options: {
        activeColor: '#b0352f'
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      let res = await http.$axios({
        url: '/api/index_list/0/data/1'
      })
      this.newData = Object.freeze(res.data);



      this.$nextTick(() => {
        this.oBetterScroll = new BetterScroll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
          click: true
        })
      })
    },

    // async addData(index) {

    //   let res = await http.$axios({
    //     url: '/api/index_list/' + index + '/data/1'
    //   })

    //   if (res.constructor != Array) {
    //     this.newData = res.data;
    //   } else {
    //     this.newData = res
    //   }

    //   this.$nextTick(() => {
    //     this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {
    //       movable: true,
    //       zoom: true,
    //       click: true,

    //     })
    //   })




    changeTab(item, index) {
      this.addData(index)
    },
    subscribe() {
      Dialog.confirm({
        title: 'TIZI 线上旗舰店',
        message: '新品开售提醒',
        theme: 'round-button',
        confirmButtonText:'允许',
        confirmButtonColor:'#1b1b1b',
        cancelButtonColor: "#ccc"
      })
        .then(() => {
          Notify({ type: 'success', message: '订阅成功' });
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  components: { Tabbar, Header, Swiper, Icons, Recommend, Ad, Like, Grid, Dswiper },
  // watch:{
  //   items :{
  //     handler(oldId,newId) {
  //       console.log('变换了');
  //       this.changeTab()
  //     },
  //     deep:true
  //   }
  // }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.headers {
  width: 100%;
  height: 1.88rem;
}

.headers-main {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

section {
  flex: 1;
  overflow: hidden;
}

::v-deep .ly-tabbar {
  box-shadow: none;
  border-bottom: none;
}


.kong {
  width: 100%;
  height: 1.6rem;
}
</style>